import { styled } from '@mui/material/styles'
import Card from './card'
import { Skeleton, Stack } from '@mui/material'
import Pagination from './pagination'
import Sorting from './sorting'
import { ImageType } from './image'
import { DEFAULT_ITEMS_PER_PAGE } from '../../store/reducers/slices/paginationSlice'
import { useSelectProducts } from '../../hooks'

const PRODUCT_CARDS = 'PRODUCT_CARDS'

const StyledContainer = styled('div')(() => ({
	display: 'flex',
	flexDirection: 'row',
	width: '992px',
	height: 'auto',
	gap: '15px',
	flexWrap: 'wrap',
}))

const CardList = () => {
	const selectProducts = useSelectProducts()

	const skeletonItems = Array.from(
		{ length: DEFAULT_ITEMS_PER_PAGE },
		(_, i) => i + 1
	)

	return (
		<Stack spacing={2}>
			<Sorting />
			<StyledContainer data-testid={PRODUCT_CARDS}>
				{selectProducts.data?.products.map(
					({ _id, pictures, stock, discount, price, wight, name, likes }) => (
						<Card
							key={_id}
							_id={_id}
							pictures={pictures}
							stock={stock}
							discount={discount}
							discountPrice={price * (1 - discount / 100)}
							price={price}
							wight={wight}
							name={name}
							likes={likes}
							type={ImageType.cardList}
						/>
					)
				)}
				{selectProducts.isFetching &&
					skeletonItems.map((item) => (
						<Skeleton key={item} variant='rounded' width={236} height={359} />
					))}
			</StyledContainer>
			<Pagination />
		</Stack>
	)
}
export default CardList
